import React, { useState } from 'react'
import { useRoutes, BrowserRouter, Outlet, useNavigate } from 'react-router-dom'
import { routes } from './router/Index'

import { Tabs } from 'antd-mobile'

import { Button, Input, Form } from 'react-vant'
function App() {

  // 手机号
  const [form] = Form.useForm()

  const onFinish = values => {
  
    console.log(values)
  }

  // 短信登录
   const [form1] = Form.useForm()

  const onFinish1 = values => {
    console.log(values)
  }
let [title,settitle]=useState('发送验证码')
let [disabled,setdisabled]=useState(false)
  let yzm=(value)=>{
    let code=Math.floor(Math.random((9999-1000)+1)+1000)
    console.log(code,'code')
 
    setdisabled(true)
      let num=10
     let time=setInterval(()=>{
          num--
          settitle(num)
          if(num==0){
            clearInterval(time)
            setdisabled(false)
            settitle('再次发送验证码')
           value.codenum==code
          }
      },1000)
  }
  let El = () => useRoutes(routes)
  return (
    <div>
      <Outlet></Outlet>
      <BrowserRouter>
        <El></El>
      </BrowserRouter>

      <Tabs>
        <Tabs.Tab title='账号登陆' key='fruits'>
          <Form
            form={form}
            onFinish={onFinish}
            footer={
              <div style={{ margin: '16px 16px 0' }}>
                <Button round nativeType='submit' type='primary' block>
                  提交
                </Button>
              </div>
            }
          >
            <Form.Item

              rules={[{ required: true, message: '请填写用户名' }]}
              name='username'
              label='用户名'
            >
              <Input placeholder='请输入用户名' />
            </Form.Item>
            <Form.Item
              rules={[{ required: true, message: '请填写密码' }]}
              name='password'
              label='密码'
            >
              <Input placeholder='请输入密码' />
            </Form.Item>
          </Form>
        </Tabs.Tab>
        <Tabs.Tab title='短信登录' key='vegetables'>
          <Form
            form={form1}
            onFinish={onFinish1}
            footer={
              <div style={{ margin: '16px 16px 0' }}>
                <Button round nativeType='submit' type='primary' block>
                  提交
                </Button>
              </div>
            }
          >
            <Form.Item
             
              rules={[{ required: true, message: '请填写手机号' }]}
              name='username'
              label='手机号'
            >
              <Input placeholder='请输入用户名' />
            </Form.Item>
            <Form.Item
              rules={[{ required: true, message: '请填写密码' }]}
              name='codenum'
              label='验证码'
            >
              <Input placeholder='请输入验证码' /><Button disabled={disabled} onClick={()=>yzm(form1)}>{title}</Button>
            </Form.Item>
          </Form>
        </Tabs.Tab>

      </Tabs>
    </div>
  )
}

export default App
